<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title></title>
    <!-- <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> -->
    <script src="assets/js/vue.js"></script>
    <script src="assets/js/axios.js"></script>
    <link rel="stylesheet" href="assets/css/element.css">
    <!-- 引入组件库 -->
    <script src="assets/js/element.js"></script>
    <!-- Required CSS files -->
    <link href="assets/css/fonts.css" rel="stylesheet">


    <link rel="stylesheet" href="assets/css/owl.carousel.css">
    <link rel="stylesheet" href="assets/css/mycss.css">

    <link rel="stylesheet" href="assets/css/barfiller.css">
    <link rel="stylesheet" href="assets/css/animate.css">
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/slicknav.css">
    <link rel="stylesheet" href="assets/css/main.css">
</head>

<body>
    <div id="app">
        <div class="preloader">
            <span class="preloader-spin"></span>
        </div>
        <div class="site">
            <header>
                <div class="container">
                    <div class="row">
                        <div class="col-6 col-sm-3 logo-column">
                            <a href="index.html" class="logo" style="color:#fff;font-size:22px">
                                <img src="assets/img/logo.png" alt="logo">&nbsp电脑DIY技术分享
                            </a>
                        </div>
                        <div class="col-6 col-sm-9 nav-column clearfix">
                            <div class="right-nav">
                                <span class="search-icon fa fa-search"></span>
                                <form action="" class="search-form" @submit.prevent="checkForm">
                                    <input v-model="s" type="search" placeholder="输入关键字">
                                    <button type="submit"><i class="fa fa-search"></i></button>
                                </form>
                            </div>
                            <nav id="menu" class="d-none d-lg-block">
                                <ul>
                                    <li><a style="cursor:pointer;color:#acbbce" @click="pub">发帖</a></li>

                                    <li v-if="userInfo.name" class="has-child">
                                        <a href="mine.html"><img :src="userInfo.headImg"
                                                style="width:30px;height:30px;border-radius:50%" alt="">
                                            {{userInfo.name}}</a>
                                        <ul class="sub-menu" style="z-index: 1000">
                                            <li><a @click="logout">注销</a></li>
                                            <li><a @click="dialogFormVisible = true">修改密码</a></li>
                                        </ul>
                                    </li>
                                    <li v-else><a style="cursor:pointer;color:#acbbce" @click="toLogin">登录</a></li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </header>




            <div class="container text-center" style="width:80%;margin: 0 auto">
                <el-breadcrumb separator-class="el-icon-arrow-right" style="margin:30px;">
                    <el-breadcrumb-item><a href="index.html">首页</a></el-breadcrumb-item>
                    <el-breadcrumb-item><a href="#">板块</a></el-breadcrumb-item>
                </el-breadcrumb>
                <el-row :gutter="20">
                    <el-col :span="16">
                        <el-card>
                            <el-row :gutter="20">
                                <el-col :span="24" style="text-align:left" class="box-card-span">
                                    <span style="color:#e58434;font-size:16px">
                                        <el-tag>公告</el-tag>
                                        <a style="cursor:pointer"
                                            @click="toDetail(adminList.id,adminList.module_id)">{{adminList.title}}</a>
                                    </span>
                                    <p v-html="adminList.content" style="padding:10px;margin:10px">
                                    </p>

                                </el-col>

                            </el-row>
                            <el-row>
                                <el-col :span="22">
                                    <el-input class="textarea" style="height:50px" type="textarea" :rows="2"
                                        placeholder="吐槽 ..." v-model="textarea">
                                    </el-input>
                                </el-col>
                                <el-col :span="2">
                                    <el-button type="primary" @click="send(adminList.id)"
                                        style="width:50px;height:50px;margin-left: 10px" icon="el-icon-edit" circle>
                                    </el-button>

                                </el-col>
                            </el-row>


                        </el-card>


                        <el-divider></el-divider>
                        <el-card v-if="list.length==0">还没有内容哦！</el-card>

                        <el-card class="elcard" v-for="o in list">
                            <el-row>
                                <div @click="toDetial(o.id)">
                                    <img style=" width:80px;height:80px;float:left;" :src="o.img" alt="">
                                    <div style="text-align:left;margin-left:20px;float: left;width:80%">
                                        <p><span @click="toDetial(o.id)" class="text-control" style="width:95%;color:#989898">
                                                <b>

                                                    <span v-if="o.is_top>0">
                                                        【置顶】
                                                    </span>
                                                    <span v-if="o.is_hot>0">
                                                        【精】
                                                    </span>
                                                    {{o.topic}}{{o.title}}

                                                </b></span>

                                            <!-- <span v-if="" style="float:right">
                                                    <el-button></el-button>
                                                </span> -->
                                        </p>
                                        <p class="tz">
                                            <span> <b><i class="el-icon-user-solid"></i>&nbsp{{o.name}}</b></span>
                                            <span style="color:#989898">{{o.publish_time}}</span>
                                            <span><i class="el-icon-chat-line-square"></i>&nbsp{{o.replyNum}}</span>
                                            <span><i class="el-icon-view"></i>&nbsp {{o.access_times}}</span>
                                            <span>最后回复：{{o.lastReplyName}}</span>
                                        </p>
                                    </div>
                                </div>
                            </el-row>
                        </el-card>
                        <el-card style="margin-top:5px">
                            <el-pagination background layout="prev, pager, next" :total="total"
                                @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                :current-page.sync="currentPage" :hide-on-single-page="true">
                            </el-pagination>
                        </el-card>
                        <br>
                        <el-card v-if="s==undefined">

                            <el-tabs v-model="activeName" type="card">
                                <el-tab-pane label="论坛热帖" name="first">
                                    <el-row>
                                        <el-col class="text-control" v-for="o in hotkeys" :span="8">
                                            <a style="color:#669cfc;cursor:pointer;padding:5px;float:left" 
                                                @click="toDetail(o.id,o.module_id)">{{o.title}}</a>
                                        </el-col>
                                    </el-row>

                                </el-tab-pane>
                                <el-tab-pane label="最新热帖" name="second">

                                    <el-row>
                                        <el-col class="text-control" v-for="o in hotkeys" :span="8">
                                            <a v-if="o.assess_times>430" style="color:#669cfc;cursor:pointer;padding:5px;float:left"
                                                @click="toDetail(o.id,o.module_id)">{{o.title}}</a>
                                        </el-col>
                                    </el-row>
                                </el-tab-pane>

                            </el-tabs>
                        </el-card>

                        <br>
                    </el-col>
                    <el-col :span="8">
                        <div id="control">
                            <el-card style="height:110px;text-align: left">
                                <el-dropdown split-button type="primary">
                                    <a style="color:#fff" href="publish.html">发表新帖</a>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item><a href="#">发起主题</a></el-dropdown-item>
                                        <el-dropdown-item><a href="#">发起活动</a></el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>

                                <el-button type="primary" onclick="location.href=('publish.html')" style="float:right"
                                    icon="el-icon-edit" circle></el-button>
                            </el-card>

                            <!-- <el-card style="height:220px;margin-top:20px;text-align:left">
                                <p>
                                    <span style="color:#e58434;font-size:16px">板块信息 </span>
                                    <el-divider></el-divider>
                                </p>
                                <div style="text-align:left">
                                    <p><span style="color:#989898">版主：</span>sss bbb</p>
                                    <p><span style="color:#989898">版副：</span>sss bbb</p>
                                    <p><span style="color:#989898">嘉宾：</span>sss bbb</p>
                                </div>
                            </el-card> -->
                            <el-card v-if="s==undefined" style="max-height:330px;margin-top:20px;text-align: left">
                                <span style="color:#e58434;font-size:16px">推荐阅读 </span>
                                <el-carousel indicator-position="none" height="150px">
                                    <el-carousel-item v-for="o in introList">
                                        <img :src="o.src" alt="" style="width:100%;float:left;height:150px"
                                            @click="toDetail(o.id,o.module_id)">
                                        <div class="card-text-attach">{{o.title}}</div>
                                    </el-carousel-item>
                                </el-carousel>

                                <ul style="list-style:none;" style="margin:20px">
                                    <li class="text-control" v-for="o in introList">
                                        <a style="color:#0575ff;cursor:pointer" @click="toDetail(o.id,o.module_id)">
                                            {{o.title}}
                                        </a>
                                    </li>
                                </ul>
                            </el-card>
                            <el-card v-if="hotkeys.length>0" id="ta"
                                style="max-height:220px;margin-top:20px;text-align: left;">
                                <p>
                                    <span style="color:#e58434;font-size:16px">本周热帖 </span>
                                </p>
                                <ul style="margin: 10px">
                                    <li class="text-control" v-for="(o,index) in hotkeys">
                                           

                                        <a v-if="index < 3" href="#!" @click="toDetail(o.id,o.module_id)" style="color:#e58434">{{index+1}} {{o.title}}</a>
                                        <a v-else  @click="toDetail(o.id,o.module_id)">{{index+1}} {{o.title}}</a>
                                    </li>
                                </ul>
                            </el-card>
                            <el-button type="danger" id="btnTop" style="display: none;z-index: 100;width:360px;"
                                @click="toTop" icon="el-icon-top">
                                回到顶部
                            </el-button>
                        </div>
                    </el-col>
                </el-row>


            </div>
            <footer>
                <div class="footer-top">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-6 col-lg-3 footer_widget">
                                <div class="inner">
                                    <h4>友情链接</h4>
                                    <p>
                                        <ul>
                                            <li><a target="_blank"
                                                    href="http://page.china.alibaba.com/buy/trade/7.html">阿里巴巴数码</a>
                                            </li>
                                            <li><a target="_blank" href="http://zone.it.sohu.com/">搜狐数码</a></li>
                                            </li>
                                            </li>
                                            <li><a target="_blank" href="//bbs.pchouse.com.cn">太平洋家居网论坛</a></li>
                                            <li><a target="_blank" href="http://fans.tcl.com/portal.php">铁粉社区(TCL)</a>
                                            </li>
                                            <li><a target="_blank" href="http://bbs.coocaa.com/">酷开社区</a></li>
                                        </ul>
                                    </p>

                                </div>
                            </div>
                            <div class="col-md-6 col-lg-3 footer_widget">
                                <div class="inner">
                                    <ul>
                                        <li><a target="_blank" href="http://bbs.mumayi.com/">安卓论坛</a></li>
                                        <li><a target="_blank" href="//product.pconline.com.cn/itbk/">IT百科</a></li>
                                        <li><a target="_blank" href="//dl.pconline.com.cn/android/">太平洋手机软件</a></li>
                                        <li><a target="_blank"
                                                href="https://product.pconline.com.cn/mobile/apple/1123572.html">iPhone
                                                XR</a>
                                        </li>
                                        <li><a target="_blank" href="http://bbs.yunos.com">云OS社区</a></li>
                                        <li><a target="_blank" href="http://bbs.elecfans.com">电子技术论坛</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="footer-bottom">
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="copyright-txt">
                                    Copyright &copy; 2019.郑州大学北校区 All rights reserved.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </footer>
            <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
                <el-form :model="form" style="text-align: left;">
                    <el-form-item label="新密码：" :label-width="formLabelWidth">
                        <el-input v-model="form.password" type="password" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="再次输入新密码：" :label-width="formLabelWidth">
                        <el-input v-model="rePassword" type="password" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="modify()">确 定</el-button>
                </div>
            </el-dialog>

        </div>
    </div>
    <!-- 自定义组件模板 -->
    <script src="assets/js/jquery-2.2.4.min.js"></script>
    <script src="assets/js/vendor/popper.min.js"></script>
    <script src="assets/js/vendor/bootstrap.min.js"></script>
    <script src="assets/js/vendor/owl.carousel.min.js"></script>
    <script src="assets/js/vendor/isotope.pkgd.min.js"></script>
    <script src="assets/js/vendor/jquery.barfiller.js"></script>
    <script src="assets/js/vendor/loopcounter.js"></script>
    <script src="assets/js/vendor/slicknav.min.js"></script>
    <script src="assets/js/active.js"></script>
    <script>


        var app = new Vue({
            el: '#app',
            data: {
                s: '',
                link: '<a href="#" rel="external nofollow" >这是一个连接</a>',
                seen: true,
                items: [

                ],
                currentPage: 1,
                userInfo: '',
                total: 0,
                mid: '',
                activeName: 'first',
                textarea: '',
                commentList: [],
                adminList: {},
                hotkeys: [],
                list: [],
                introList: [],
                introImgs: [
                    {
                        name: "入门游戏新机综合搭配",
                        url: "https://s2.ax1x.com/2019/05/06/EBRZqK.jpg"

                    }, {
                        name: "全侧透光污染主机，微星Z270平台装机",
                        url: "https://img.pconline.com.cn/images/upload/upc/tx/itbbs/1904/24/c19/144112747_1556100405099.jpg"

                    }, {
                        name: "从奔腾4到G4560，一台老爷机的复活记",
                        url: "https://s2.ax1x.com/2019/05/06/EBRZqK.jpg"

                    }, {
                        name: "用NAS备份数据，可以无惧比特币勒索！",
                        url: "https://s2.ax1x.com/2019/05/06/EBRZqK.jpg"

                    }
                ],
                content: {},
                feedback: '',
                imgs: ['https://s2.ax1x.com/2019/05/06/EBRZqK.jpg', 'https://s2.ax1x.com/2019/05/06/EBRZqK.jpg'],
                userInfo: '',
                formLabelWidth: '140px',
                form: {
                    password: ''
                },
                rePassword: '',
                dialogFormVisible: false,

            },
            methods: {
                pub() {
                    let _this = this

                    if (_this.$data.userInfo == '') {
                        _this.$message.error("请先登录！")
                        return false
                    }
                    location.href = ("publish.html")

                },
                modify() {
                    if (this.form.password != this.rePassword) {
                        this.$message.error('两次输入的密码不一致，请重新输入')
                        return false
                    }
                    axios({
                        method: 'PUT',
                        headers: {
                            'token': sessionStorage.getItem('token'),
                            'Content-Type': 'application/x-www-form-urlencoded',
                        },
                        url: `http://127.0.0.1:888/member/password?password=${this.form.password}`,
                    }).then((re) => {
                        console.log('re', re)
                        if (re.data.code === 2) {
                            this.$message({
                                message: '修改成功，请重新登录',
                                type: 'success'
                            });
                            setTimeout('location.href=("login.html")', 1000)

                        }
                        else if (re.data.code === 1) {
                            this.$message.error('登录超时')
                        } else {
                            this.$message.error(re.data.content)
                        }
                    })
                },

                checkForm(param) {
                    let _this = this
                    let searchUrl = encodeURI(`list.html?s=${_this.$data.s}`);   //使用encodeURI编码
                    let code = escape(_this.$data.s)
                    location.href = (`list.html?s=${code}&id=3`)
                },
                toLogin() {
                    location.href = (`login.html?backUrl=${escape(document.location.pathname + document.location.search)}`)
                },
                /**
                   <el-pagination background layout="prev, pager, next" :total="1000"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page.sync="currentPage1"
                            >
                            */
                handleSizeChange(e) {
                    console.log('size', e)
                },
                handleCurrentChange(e) {
                    let _this = this
                    const loading = this.$loading({
                        lock: true,
                        text: 'Loading',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    let _url = _this.$data.s == undefined ? `http://127.0.0.1:888/invitation/page?current=${e}` : `http://127.0.0.1:888/invitation/page?current=${e}&title=${_this.$data.s}`
                    axios({
                        method: 'get',
                        headers: {
                            'token': sessionStorage.getItem('token'),
                            'Content-Type': 'application/x-www-form-urlencoded',
                        },
                        url: _url,
                    }).then((re) => {
                        console.log(re)
                        if (re.data.code === 0) {
                            this.$data.list = re.data.content.records
                            loading.close();
                            // 显示增强 回到顶部
                            this.toTop();

                        }
                    })
                },
                toTop() {
                    let timer = null;
                    cancelAnimationFrame(timer);
                    timer = requestAnimationFrame(function fn() {
                        let oTop = document.body.scrollTop || document.documentElement.scrollTop;
                        if (oTop > 0) {
                            document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
                            timer = requestAnimationFrame(fn);
                        } else {
                            cancelAnimationFrame(timer);
                        }
                    });
                },
                toDetail(id, mid) {
                    location.href = (`detail.html?id=${id}&mid=${mid}`)
                },
                logout() {
                    axios({
                        method: 'get',
                        headers: {
                            'token': sessionStorage.getItem('token'),
                            'Content-Type': 'application/x-www-form-urlencoded',
                        },
                        url: 'http://127.0.0.1:888/member/out',
                    }).then((re) => {
                        console.log('re', re)
                        if (re.data.code === 0) {
                            this.$message({
                                message: '注销成功',
                                type: 'success'
                            });
                            sessionStorage.removeItem('userInfo')
                            setTimeout('location.href=("index.html")', 500)

                        }
                    })
                },
                GetRequest() {
                    var url = location.search; //获取url中"?"符后的字串  
                    var theRequest = new Object();
                    if (url.indexOf("?") != -1) {
                        var str = url.substr(1);
                        strs = str.split("&");
                        for (var i = 0; i < strs.length; i++) {
                            theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                        }
                    }
                    return theRequest;
                },
                toDetial(id) {
                    location.href = (`detail.html?id=${id}&mid=${this.$data.mid ? this.$data.mid : 3}`)
                },
                send(id) {
                    let _this = this
                    if (_this.$data.userInfo == '') {
                        _this.$message.error("请先登录后再评论")
                        return false;
                    }
                    if (id != -1) {
                        if (this.moduleId === '') {
                            this.$message.error('请选择模块')
                            return;
                        }
                        if (this.textarea === '') {
                            this.$message.error('请输入要发布的内容')
                            return;
                        }
                        axios({
                            method: 'POST',
                            data: {
                                content: this.textarea,
                                invitationId: id,
                                memberId: _this.$data.userInfo.id
                            },
                            headers: {
                                'token': sessionStorage.getItem('token'),
                                'Content-Type': 'application/json',
                            },
                            url: 'http://127.0.0.1:888/reply/add',
                        }).then((re) => {
                            console.log('re', re)
                            if (re.data.code === 0) {
                                this.$message({
                                    message: '发布成功',
                                    type: 'success'
                                });
                                this.textarea = ""
                                this.getList(this.$data.param)


                            }
                        })
                    } else {
                        this.$message.error('未登录，需要先登录')
                        $('body').css('overflow', 'hidden');//浮层出现时窗口不能滚动设置
                    }
                    this.$message({
                        message: '已反馈',
                        type: 'success'
                    })
                },
                getList(param) {

                    const loading = this.$loading({
                        lock: true,
                        text: 'Loading',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    let _this = this
                    axios.defaults.headers.post['Content-Type'] = "application/x-www-form-urlencoded"
                    axios.defaults.headers.token = sessionStorage.getItem('token')
                    param = param == undefined ? 3 : param
                    axios.all([
                        axios.get(`http://127.0.0.1:888/invitation/page?moduleId=${param}`),
                        axios.get(`http://127.0.0.1:888/invitation/page?moduleId=${param}&assessTimes=11`),
                        axios.get(`http://127.0.0.1:888/invitation/page?moduleId=-1`),
                    ]).then(axios.spread(function (ires, cres, gres) {
                        console.log('User', ires.data);
                        console.log('self', cres.data);
                        if (ires.data.code === 0) {
                            _this.$data.list = ires.data.content.records
                            _this.$data.total = ires.data.content.total
                            loading.close()
                            let i = ires.data.content.records.length - 1 > 4 ? 4 : ires.data.content.records.length - 1
                            let m = ires.data.content.total > 10 ? 10 : ires.data.content.total
                            let j = 0

                            while (i-- > 0) {
                                let tmp = ires.data.content.records[Math.floor(Math.random() * m)]
                                tmp.src = _this.$data.introImgs[i].url

                                _this.$data.introList.push(tmp)
                            }

                            _this.$data.introList = Array.from(new Set(_this.$data.introList))
                            console.log('_this.$data.introList', _this.$data.introList)

                        }
                        if (cres.data.code === 0) {
                            _this.$data.hotkeys = cres.data.content.records
                        }
                        console.log('22', gres.data)
                        if (gres.data.code === 0) {
                            _this.$data.adminList = gres.data.content.records[0]
                        }


                    }));

                },
            },

            created: function () {


                window.onscroll = function () {
                    scrollFunction()
                };

                function scrollFunction() {
                    if (document.body.scrollTop > 150 || document.documentElement.scrollTop > 150) {
                        document.getElementById("control").className = "control";
                        document.getElementById("btnTop").style.display = "block";
                        document.getElementById("ta").style.display = "none";
                    } else {
                        document.getElementById("control").className = "";
                        document.getElementById("ta").style.display = "block"; document.getElementById("btnTop").style.display = "none";
                    }
                }
                let param = this.GetRequest()
                let mid = param.id
                let s = param.s
                let _this = this
                _this.$data.mid = mid
                _this.$data.s = s
                let userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
                console.log('user', userInfo)
                if (userInfo != null) {
                    _this.$data.userInfo = userInfo
                }

                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                console.error('s,', unescape(s))
                if (s != undefined) {
                    console.log('sss')
                    axios({
                        method: 'get',
                        headers: {
                            'token': sessionStorage.getItem('token'),
                            'Content-Type': 'application/x-www-form-urlencoded',
                        },
                        url: `http://127.0.0.1:888/invitation/page?title=${s}`,
                    }).then((ires) => {
                        console.log('re', ires)
                        if (ires.data.code === 0) {
                            _this.$data.list = ires.data.content.records
                            _this.$data.total = ires.data.content.total
                            loading.close()

                        }
                    })
                } else {

                    _this.getList(_this.$data.mid)
                }
                axios({
                    method: 'get',
                    headers: {
                        'token': sessionStorage.getItem('token'),
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    url: `http://127.0.0.1:888/invitation/page?moduleId=-1`,
                }).then((ires) => {
                    console.log('re', ires)
                    if (ires.data.code === 0) {
                        _this.$data.adminList = ires.data.content.records[0]
                    }
                })

            }
        })
    </script>
</body>

</html>